<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		
		<style>
			 *{
				margin: 0;
				padding: 0;
			}
			body{
				display: flex;
				background-color: linen
			} 
			
			#run{
				background-image: url(image/running.jpg);
				
			}
			#bike{
				background-image: url(image/bike.jpg);
			}
			#training{
				background-image: url(image/yaling.jpg);
			}
			.one{
				background-repeat: no-repeat;
				background-image: url(image/sanbu.jpg);
				background-size:100% 100%;
				height:50%;
				width: 100%;
				position: relative;
			}
			.txt{
				text-align: center;
				font-size: 16px;
				display: block;
				width: 100%;
				line-height: 2rem;
				height: 2rem;
				background: #999;
				opacity: 0.5;
				position: absolute;
				bottom: 0;
			}
			.mui-slider-group{
				height: 32.75rem;
				border: none;
			}
			.btn-group{
				border-top:1px solid #ccc;
				height: 50%;				
			}
			.btn-group button{
				width: 6rem;height: 6rem;
				border-radius: 50%; background-color: #2AC845;
				position: relative;
				top: 5rem;
				left: 38%;
				color:#fff;
				font-size: 20px;
				box-shadow: #888 0px 0px 15px;
			}
			#readwalking {
				display: block;
				margin-top: 25px;
				text-align: center;
				font-size: 1.875rem;
				color: #000000;
			}
		</style>
	</head>

	<body>
		<div class="mui-slider">
			<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item" href="#item1">健走</a>
				<a class="mui-control-item" href="#item2">跑步</a>
				<a class="mui-control-item" href="#item3">骑行</a>
				<a class="mui-control-item" href="#item4">无氧</a>
			</div>
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
			<div class="mui-slider-group ">
				<div id="item1" class="mui-slider-item mui-control-content mui-active">
					
					<div id="walking" class="one">
						<span class="txt">用步伐丈量世界</span>
					</div>
					<div class="btn-group">
						<button id="start_walking" type="button">我要健走</button> 
					</div>
					<div id="readwalking">查看运动记录</div>
				</div>
				<div id="item2" class="mui-slider-item mui-control-content ">
					<div id="run" class="one">
						<span class="txt">跑步20分钟，来缓解焦虑，放松身心</span>
					</div>
					<div id="drun" class="btn-group">
						<button id="start_running" type="button">我要跑步</button>
					</div>
				</div>
				<div id="item3" class="mui-slider-item mui-control-content ">
					<div id="bike" class="one">
						<span class="txt">感受追风的快乐</span>
					</div>
					<div class="btn-group">
						<button id="start_bike" type="button">我要骑车</button>
					</div>
				</div>
				<div id="item4" class="mui-slider-item mui-control-content ">
					<div id="training" class="one">
						<span class="txt">释放身体的力量</span>
					</div>
					<div class="btn-group">
						<button id="start_training" type="button">我要健身</button>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function () {
				
			    var start_walking = document.getElementById("start_walking");
				var start_running = document.getElementById("start_running");
				var start_bike = document.getElementById("start_bike");
				var start_training = document.getElementById("start_training");
				start_walking.addEventListener("tap",function(){
					mui.openWindow({
						url:"sports/timing.html",
						id:"timing.html",
						extras:{
							type:"健走"
						}
					});
				});
				
				start_running.addEventListener("tap",function(){
					mui.openWindow({
						url:"sports/timing.html",
						id:"timing.html",
						extras:{
							type:"跑步"
						}
					});
				});
				
				start_bike.addEventListener("tap",function(){
					mui.openWindow({
						url:"sports/timing.html",
						id:"timing.html",
						extras:{
							type:"骑行"
						}
					});
				});
				
				start_training.addEventListener("tap",function(){
					mui.openWindow({
						url:"sports/timing.html",
						id:"timing.html",
						extras:{
							type:"无氧"
						}
					});
				});
				
				
			});
			
		</script>
	</body>

</html>
